<script setup>
import { ref, watch } from 'vue';
import { onReady } from '@dcloudio/uni-app';
import dayjs from 'dayjs';

const props = defineProps({
  modelValue: [String, Number],
  placeholder: {
    type: String,
    default: '请选择日期',
  },
  mode: {
    type: String,
    default: 'date',
  },
  inputAlign: {
    type: String,
    default: 'left',
  },
  formatter: Function,
  defaultDate: [String, Number],
  minDate: {
    type: Number,
    default: 0,
  },
  maxDate: Number,
  dateFormatter: {
    type: Function,
    default: function(type, value) {
      if (type === 'year') {
        return `${value}年`;
      }
      if (type === 'month') {
        return `${value}月`;
      }
      if (type === 'day') {
        return `${value}日`;
      }
      if (type === 'hour') {
        return `${value}时`;
      }
      if (type === 'minute') {
        return `${value}分`;
      }
      return value;
    },
  },
});

const emits = defineEmits(['update:modelValue', 'confirm', 'cancel']);
const datetimePickerRef = ref(null);
const datetime = ref(undefined);
const show = ref(false);
const inputValue = ref('');

watch(() => props.defaultDate, () => {
  if (props.defaultDate) {
    datetime.value = dayjs(props.defaultDate).valueOf();
  }
}, {
  immediate: true,
});

watch(() => props.modelValue, () => {
  if (props.formatter) {
    inputValue.value = props.formatter(props.modelValue);
    return;
  }
  inputValue.value = props.modelValue;
}, {
  immediate: true,
});

function handleConfirm(data) {
  emits('update:modelValue', data.value);
  emits('confirm', data);
}

function handleCancel() {
  show.value = false;
  emits('cancel');
}

function setFormatter(fun) {
  datetimePickerRef.value.setFormatter(fun);
}

function close() {
  show.value = false;
}

onReady(() => {
  // 为了兼容微信小程序
  datetimePickerRef.value.setFormatter((type, value) => {
    if (type === 'year') {
      return `${value}年`;
    }
    if (type === 'month') {
      return `${value}月`;
    }
    if (type === 'day') {
      return `${value}日`;
    }
    if (type === 'hour') {
      return `${value}时`;
    }
    if (type === 'minute') {
      return `${value}分`;
    }
    return value;
  });
});

defineExpose({
  // 兼容微信小程序抛出设置格式化方法
  setFormatter,
  close,
});
</script>

<template>
  <view class="custom-datetime-picker" @click="show = true">
    <u--input
      border="none"
      v-model="inputValue"
      :placeholder="placeholder"
      :inputAlign="inputAlign"
      readonly>
      <template #suffix>
        <view class="datetime-icon">
          <image
            style="width: 44.0rpx; height: 44.0rpx"
            :src="'/static/images/icon-' + (mode === 'time' ? 'time' : 'calendar') + '.png'">
          </image>
        </view>
      </template>
    </u--input>
    <u-datetime-picker
      ref="datetimePickerRef"
      v-model="datetime"
      :show="show"
      :maxDate="maxDate"
      :minDate="minDate"
      :mode="mode"
      @cancel="handleCancel"
      @confirm="handleConfirm"
      :formatter="dateFormatter"
      v-bind="$attrs"
    ></u-datetime-picker>
  </view>
</template>

<style scoped lang="scss">
.custom-datetime-picker {
  width: 100%;
}

.datetime-icon {
  height: 100%;
  display: flex;
  align-items: center;
}
</style>


